import React, { useEffect, useState } from "react";
import { Cascader } from "antd";
import styled from "./index.module.less";
interface Option {
  value: any;
  id?: string;
  label: string;
  children?: Option[];
}

const onChange = (value: any[]) => {
  console.log(value);
};

const App: React.FC = () => {
  const [options, setOptons] = useState([
    {
      label: "All ",

      value: "0",
      children: [
        {
          label: "Abandoned carts - last 30 days",
          value: "3",
          children: [
            {
              label: "VIP ",
              value: "6",
            },
            {
              label: "New ",
              value: "7",
            },
          ],
        },
        {
          label: "Wholesale ",
          value: "4",
        },
        {
          label: "Email ",
          value: "5",
        },
      ],
    },
    {
      label: " customers",
      value: "1",
    },
    {
      label: "pructure",
      value: "2",
    },
  ]);

  return (
    <Cascader
      options={options}
      onChange={onChange}
      changeOnSelect
      className={styled.Casders}
      bordered={false}
    />
  );
};

export default App;
